<template>
  <div>
    <h1>用户管理</h1>
    <UserTable :users="users" @change-password="handleChangePassword" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { useUserStore } from '@/stores/user';
import { fetchUserList, changePassword } from '@/api/users';
import UserTable from '@/components/UserTable.vue';

const router = useRouter();
const userStore = useUserStore();
const users = ref([]);

onMounted(async () => {
  console.log('👥 用户管理页面加载');
  console.log('🔍 认证状态检查:', {
    isLogin: userStore.isLogin,
    hasToken: !!userStore.token,
    token: userStore.token,
    username: userStore.username
  });
  
  // 路由守卫已经处理了认证检查，这里直接加载数据
  console.log('✅ 已通过路由守卫认证，加载用户数据');
  try {
    users.value = await fetchUserList();
  } catch (error) {
    console.error('❌ 加载用户数据失败:', error);
  }
});

function handleChangePassword(payload: any) {
  changePassword(payload);
}
</script> 